<template>
  <hx-page>
    <div class='hxPage_bank'>
      <input
          class='hxPage_bank_input'
          name='bankCardNum'
          title='银行卡号'
          type='text'
          placeholder='请输入银行卡号'
          v-model="bankCardNum"
      />
      <input
          class='hxPage_bank_input'
          name='bankCardNum'
          title='卡号确认'
          type='text'
          placeholder='请再次输入银行卡号'
          v-model="bankCardNumAgain"
      />

      <input
          class='hxPage_bank_input'
          name='name'
          title='开户姓名'
          type='text'
          placeholder='请输入开户姓名'
          v-model="name"
      />
      <div class='tips'>温馨提示：本银行卡(不可使用信用卡，推荐使用农行卡)信息用于毕业退款。</div>
      <button
          class='hxButton'
          :disabled="this.bankCardNum === '' || this.bankCardNumAgain === '' || this.name === ''"
          @click="onSubmit">确定
      </button>
      <button
          class='hxButton'
          :disabled="this.bankCardNum1=== ''"
          onClick={this.delete.bind(this)}>删除
      </button>
    </div>
  </hx-page>
</template>

<script>
import {HxPost} from "../../service/http";

export default {
  name: "index",
  data() {
    return {
      cardInfo: null,
      bankCardNum: '',
      bankCardNumAgain: '',
      bankCardNum1: '',
      name: '',
      name1: '',
    }
  },
  onLoad(e) {
    this.cardInfo = JSON.parse(e.cardInfo)
    uni.showLoading({title: '加载中...', mask: true})
        .then(() => {
          return HxPost('getBankInfo', {})
        })
        .then((data) => {
          this.bankCardNum = data.bankCardNum;
          this.bankCardNum1 = data.bankCardNum;
          this.name = data.name;
          this.name1 = data.name;
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
        })
  },
  methods: {
    onSubmit() {
      if (!/^[1-9]\d{15,18}$/.test(this.bankCardNum)) {
        uni.showToast({title: '银行卡号格式不正确', icon: 'none', duration: 2 * 1000}).catch();
        return;
      }
      if (this.bankCardNum !== this.bankCardNumAgain) {
        uni.showToast({title: '两次输入银行卡号不一致', icon: 'none', duration: 2 * 1000}).catch();
        return;
      }
      if (!/^([\u4e00-\u9fa5·]{2,16})$/.test(this.name)) {
        uni.showToast({title: '姓名格式不正确', icon: 'none', duration: 2 * 1000}).catch();
        return;
      }

      uni.showModal({
        title: '',
        content: `您输入的银行卡号为『${this.bankCardNum}』，开户姓名为『${this.name}』`,
        showCancel: true,
        cancelText: '取消',
        confirmText: '确定'
      })
          .then((res) => {
            if (res[0].confirm) {
              return uni.showLoading({title: '加载中...', mask: true});
            } else {
              return Promise.reject('cancel');
            }
          })
          .then(() => {
            return HxPost('setBankInfo', {
              operaType: '0',
              bankCardNum: this.bankCardNum,
              name: this.name
            })
          })
          .then(() => {
            this.bankCardNum1 = this.bankCardNum;
            this.name1 = this.name;
            uni.hideLoading();
            uni.showToast({title: '提交成功', icon: 'success', duration: 2 * 1000}).catch();
          })
          .catch((err) => {
            if (err !== 'cancel') {
              uni.hideLoading();
              uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 3 * 1000}).catch();
            }
          })
    },

    delete() {
      uni.showLoading({title: '加载中...', mask: true})
          .then(() => {
            return HxPost('setBankInfo', {
              operaType: '1',
              bankCardNum: this.bankCardNum1,
              name: this.name1
            })
          })
          .then(() => {
            this.bankCardNum = ''
            this.bankCardNumAgain = ''
            this.bankCardNum1 = ''
            this.name = ''
            this.name1 = ''
            uni.hideLoading();
            uni.showToast({title: '删除成功', icon: 'success', duration: 2 * 1000}).catch();
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
          })
    }
  }
}
</script>

<style scoped lang="scss">
.hxPage_bank {
  padding: 0 20PX;

  &_input {
    margin-left: 0;
    margin-bottom: 20PX;
    padding: 8PX 0;
    border: 1PX solid #e1e1e1;
  }

  .at-input__title {
    text-align: center;
    display: inline-block;
    border-right: 1PX solid #e1e1e1;
    width: 80PX;
    margin-right: 15PX;
  }

  .hxButton {
    width: 100%;
  }

  .tips {
    color: navy;
    margin-bottom: 10px;
  }
}
</style>
